{# Наследование от базового шаблона #}
{% extends 'base.html' %}
{# Загрузка статических файлов #}
{% load static %}

{# Мета-теги для SEO #}
{% block title %}Главная - Корочки.есть{% endblock %}
{% block description %}Запишитесь на онлайн курсы программирования, веб-дизайна и баз данных. Официальные документы.{% endblock %}
{% block keywords %}курсы, программирование, веб-дизайн, базы данных, обучение{% endblock %}

{% block content %}

<div class="row">
    <div class="col-12 text-center mb-5">
        <h1>Добро пожаловать!</h1>
    </div>
</div>

{# Слайдер с курсами #}
<div class="row justify-content-center">
    {# Контейнер слайдера с ограничением ширины #}
    <div class="col-12 col-lg-10 col-xl-8">
        <div id="courseSlider" class="carousel slide" data-bs-ride="carousel">
            {# Индикаторы слайдов (точки внизу) #}
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#courseSlider" data-bs-slide-to="0" class="active"></button>
                <button type="button" data-bs-target="#courseSlider" data-bs-slide-to="1"></button>
                <button type="button" data-bs-target="#courseSlider" data-bs-slide-to="2"></button>
                <button type="button" data-bs-target="#courseSlider" data-bs-slide-to="3"></button>
            </div>
            
            {# Контейнер слайдов #}
            <div class="carousel-inner">
{# Слайд 1 - Программирование #}
                <div class="carousel-item active">
                    <img src="{% static 'images/slide1.jpg' %}" class="d-block w-100" alt="Курсы программирования">
                </div>
                {# Слайд 2 - Веб-дизайн #}
                <div class="carousel-item">
                    <img src="{% static 'images/slide2.jpg' %}" class="d-block w-100" alt="Веб-дизайн">
                </div>
                {# Слайд 3 - Базы данных #}
                <div class="carousel-item">
                    <img src="{% static 'images/slide3.jpg' %}" class="d-block w-100" alt="Базы данных">
                </div>
                {# Слайд 4 - Документы #}
                <div class="carousel-item">
                    <img src="{% static 'images/slide4.jpg' %}" class="d-block w-100" alt="Дипломы">
                </div>
            </div>
            
            {# Кнопки переключения слайдов #}
            <button class="carousel-control-prev" type="button" data-bs-target="#courseSlider" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Предыдущий</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#courseSlider" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Следующий</span>
            </button>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12 text-center mb-5">
        {# Разные кнопки для авторизованных и неавторизованных пользователей #}
        {% if not user.is_authenticated %}
            <div class="mt-4">
                <a href="{% url 'register' %}" class="btn btn-primary btn-lg me-3">Начать обучение</a>
                <a href="{% url 'login' %}" class="btn btn-outline-primary btn-lg">Войти в систему</a>
            </div>
        {% else %}
            <div class="mt-4">
                <a href="{% url 'create_application' %}" class="btn btn-success btn-lg me-3">Подать заявку на курс</a>
                <a href="{% url 'applications' %}" class="btn btn-outline-success btn-lg">Мои заявки</a>
            </div>
        {% endif %}
    </div>
</div>

{% endblock %}

{# Блок для JavaScript кода #}
{% block scripts %}
<script>
    // Автопереключение слайдов каждые 3 секунды
    document.addEventListener('DOMContentLoaded', function() {
        var myCarousel = document.getElementById('courseSlider');
        var carousel = new bootstrap.Carousel(myCarousel, {
            interval: 3000,
            wrap: true
        });
    });
</script>
{% endblock %}